


import { AtInput, AtForm } from 'taro-ui'
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/icon.scss";
import React, { FC } from 'react';
import { View } from '@tarojs/components';
import style from './index.module.scss'
import classname from 'classnames/bind'
const CBN = classname.bind(style)

type ZInputType = {
    children: React.ReactNode,
    value: any,
    name?: string,
    title?: string,
    placeholder?: string,
    type?: "number" | "text" | "password" | "phone" | "idcard" | "digit" | undefined,
    editable?: boolean,
    required?: boolean,
    clear?: boolean,
    lefticon?: string,
    setValue: (value: any) => void,
    onErrorClick?: (value: any) => void
}

const ZInput: FC<ZInputType> = (props) => {
    const { children, onErrorClick, lefticon = null, value, setValue, placeholder = '请输入', type = 'text', title = undefined, name = 'value', required, clear } = props
    return <View className={CBN('ZInput')}>
        {lefticon === null ? null : <View className={CBN('icon')}
            style={{ backgroundImage: `url(${lefticon})` }}
        >
        </View>}
        <AtInput
            className={CBN('ele_input')}
            required={required}
            clear={clear}
            name={name}
            title={title}
            type={type}
            placeholder={placeholder}
            value={value}
            onChange={setValue.bind(this)}
            onErrorClick={onErrorClick}
        >
            {children}
        </AtInput>
    </View>
}

export default ZInput